import React from 'react'
import { Link } from 'react-router-dom'
import 'antd/dist/antd.css'
import { Layout, Icon, Menu, Switch } from "antd";
import Top from './header/header'
import { allMenu } from '../utils/menu'
import Contents from './content/content'
import './index.css'
import logo from '../images/logo.png'


const SubMenu = Menu.SubMenu;
const { Sider, Content } = Layout

export default class Container extends React.Component{
    state = {
        collapsed : false,
        theme : 'dark',
        mode : 'inline'
    }

    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed
        });

    }

    changeTheme = (val) => {
        this.setState({
            theme: val ? 'dark' : 'light'
        });
    }

    clear = () => {
        this.setState({
           
        });
    }


    render() {
        return (
            <Layout className='full-screen'>
                <Sider
                    trigger={null}
                    collapsible
                    collapsed={this.state.collapsed}
                    onCollapse={this.onCollapse}
                    >
                    <div className={this.state.collapsed?'log-div-collapsed':'logo-div'}><img src={logo} className={this.state.collapsed?'log-collapsed':'logo'} /></div>
                    <Menu className="menu" theme={this.state.theme} mode={this.state.mode} defaultSelectedKeys={['1']}>
                        {
                            allMenu.map((submenu) => {
                                if(submenu.children && submenu.children.length) {
                                    return (
                                        <SubMenu key={submenu.url} title={<span><Icon type={submenu.icon} style={{ fontSize: 16 }}/><span>{submenu.name}</span></span>}>
                                        
                                        {submenu.children.map(levelmenu => (
                                                <Menu.Item key={levelmenu.url}>
                                                    <Link to={`/${levelmenu.url}`}>
                                                        {levelmenu.name}
                                                    </Link>
                                                </Menu.Item>
                                            )) }
                                        </SubMenu>
                                    )
                                }

                                return (
                                    <Menu.Item key={submenu.url}>
                                    <Link to={`/${submenu.url}`}>
                                        <Icon type={submenu.icon} style={{ fontSize: 16 }}/>
                                        <span>{submenu.name}</span>
                                    </Link>
                                    </Menu.Item>
                                )

                            })
                        }
                    </Menu>
                    <div className="switch">
                        <Switch 
                            checkedChildren={this.state.theme} 
                            unCheckedChildren={this.state.theme} 
                            defaultChecked 
                            onChange={this.changeTheme}
                        />
                    </div>
                    
                </Sider>
                <Layout>
                    <Layout>
                        <Top toggle={this.toggle} collapsed={this.state.collapsed} clear={this.clear}/>
                        <Contents /> 
                    </Layout>
                </Layout>
            </Layout>
        );
    }
}